<!-- 泊位委托 -->
<template>
    <div class="breth">
      <!-- 顶部查询 -->
        <div class="selectBox">
        <el-form size="mini" :model="form" inline>
            <el-form-item label="">
                <el-select v-model="form.companyCode"  clearable style="width:150px" placeholder="请选择公司">
                    <el-option
                    v-for="(item,index) in company"
                    :key="index"
                    :label="item.companyName"
                    :value="item.companyCode">
                    </el-option>
                </el-select>
            </el-form-item>
        
            <el-form-item label="">
                    <el-date-picker
                        v-model="form.workDate"
                        type="date"
                        style="width:150px"
                        :clearable="false"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                <!-- 查询按钮 -->
                    <el-button type="primary" icon="el-icon-search" @click="findlist">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    <!-- 列表区域 -->
      <el-table
        highlight-current-row
        :data="tableData"
        :height="tableHeight"
        stripe
        style="width: 100%"
      >
        <!-- <el-table-column prop="berthName" label="作业公司" width="210"></el-table-column> -->
        <el-table-column prop="berthName" label="泊位" width="190" ></el-table-column>
        <el-table-column  label="已上报缆桩" width>
            <template slot-scope="scope">
                <span 
                  v-for="item in scope.row.bittList"
									:key="item.id">
                      {{item.bittNo}}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width></el-table-column>
      </el-table>
    <!-- 分页区域 -->
      <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 30, 45]"
            :page-size="form.pagesize"
            :current-page="form.startpage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
    </div>
</template>

<script>

export default {
  name: "bowei",
  data() {
    return {
        total:0,
        form:{
          workDate:'',
          companyCode:'',
          startpage:1,
          pagesize:10
        },
        tableData:[],
        company:[],
        user:true,
        tableHeight:window.innerHeight - 260
    };
  },

  async created(){
    this.form.workDate = this.timeDefault;
    await this.getcomp();
    await this.getlistberth();
  },
  computed:{
    timeDefault() {
      var date = new Date();
      var s1 = date.getFullYear() + "/" + ((date.getMonth() + 1) < 10?"0" + (date.getMonth() + 1):(date.getMonth() + 1)) + "/" + ((date.getDate()+1) < 10?"0" + (date.getDate()+1):(date.getDate()+1));
      return s1;
    },
  },
   mounted(){
    // this.form.workDate = this.timeDefault;
  },
  methods: {
      //获取公司
      async getcomp(){
        const res = await this.$http.get(`/${this.$ServiceName}/api/external/protected/listworkthirdcompany`)
        if(res.data.code == "0000"){
              this.company = res.data.data
              let comp = []
              for(var i = 0; i <this.company.length; i++){
                  if(this.company[i].companyCode == window.sessionStorage.getItem('companyCode')){
                    comp.push(this.company[i])
                  }
              }
              this.form.companyCode = comp[0].companyCode
        }
      },

      //获取列表list
      async getlistberth(){
          this.getcomp();
          const res = await this.$http.get(`/${this.$ServiceName}/api/external/dreportberth/${this.$version}/queryaudit`,{params:this.form})
          if(res.data.code != "0000"){
            this.$message.error(res.data.code)
          }
          console.log(res)
          this.tableData = res.data.data.pages
          this.total = res.data.data.totalNum;
          this.form.startpage = res.data.data.pageNum
          this.form.pagesize  = res.data.data.pageSize
              // console.log(this.form.companyCode)
      },
      handleSizeChange(val){
        this.form.pagesize = val
        this.getlistberth()
      },
      handleCurrentChange(val){
        this.form.startpage = val
        this.getlistberth()
      },
      findlist(){
          this.getlistberth()
      },

  }
};
</script>

<style lang="less" scoped>
/deep/.el-drawer__header{
  height: 41px;
  font-size: 16px;
}
.breth /deep/ .el-tabs--border-card{
  border:none!important;
  -webkit-box-shadow:none!important;
  box-shadow:none!important
}
.breth /deep/ .el-tabs__content{
    padding: 0;
}
.pop /deep/ .el-form-item__content{
  margin-left: 10px!important;
  padding-right: 30px;
}
.pop /deep/ .el-textarea{
  width: 100%!important;
  margin-left: 0!important;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
.lanzhuang /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}
.tableX .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
   background-color: #ccc !important;
   border-radius: 30px !important;
}
/deep/ .el-table th {
  height: 41px!important;
}
/deep/ .el-table tr{
  height: 41px!important;
}
.form-t {
  margin-bottom: 50px;
  padding: 0 1rem;
}
.form-t /deep/ .el-form-item__content {
  margin-left: 1rem !important;
  width: 60%;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
/deep/ .el-form-item {
  display: flex; 
  margin-bottom: 0;
}

.pop /deep/ .el-form-item {
  margin-bottom: 15px;
}
.pop /deep/ .el-form-item__content{
  width: 100%;
}
.pop /deep/ .el-select{
  width: 100%;
}
.pop .el-date-editor.el-input{
     width: 100%;
}
// .pop /deep/ .el-input--mini .el-input__inner{
//   width: 72%;
// }
.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  // line-height: 35px;
  padding-right: 1rem;
  height: 51px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box {
  border-bottom: 1px solid #e1e4eb;
  border-top: none !important;
  border-radius: 4px 4px 0 0;
}
.box .selectBox{
  background: #F5F7FA;
}
.selectBox /deep/ .iconfont{
  padding: 0;
}
.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;
  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
/deep/ .el-table .cell {
  white-space: nowrap;
}
/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
}
/deep/ .el-table .el-button:focus,
.el-button:hover {
  background-color: #fff;
  color: #338ce8;
  border: 1px solid #e1e4eb;
}
/deep/ .v-modal {
  z-index: 200 !important;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
  border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px;
  padding: 8px 20px 0;
}
.selectBox {
  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 6px;
  }
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;
  line-height: 28px;
  height: 39px;
  padding-top: 11px;
  padding-left: 20px;
  padding-right: 32px;
}
.el-button {
  margin-left: 0px !important;
}
</style>
